<template>
  <div class="app-container">
    <el-form label-width="120px">

      <el-form-item label="讲师头像">

        <!-- 头衔缩略图 -->
        <pan-thumb :image="String(teacher.avatar)" />
        <br>
        <!-- 文件上传按钮 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          @click="imagecropperShow = true"
          style="margin-left: 12px"
        > 更换头像
        </el-button>

        <!--
        v-show：用于隐藏组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分
        :url：后台上传的url地址
        @close：关闭上传组件回调函数
        @crop-upload-success：上传成功后的回调函数

        field：这里field的值必须和后端接口MultipartFile file的形参名相同
      -->
        <image-cropper
          v-show="imagecropperShow"
          :width="400"
          :height="400"
          :key="imagecropperKey"
          :url="'/oss/file/upload'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
      </el-form-item>

      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"/>
      </el-form-item>

      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="right" :min="0"/>
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
              数据类型一定要和取出的json中的一致,否则没法回填
              因此，这里value使用动态绑定的值，保证其数据类型是nurmber
          -->
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>

      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"/>
      </el-form-item>

      <el-form-item label="讲师简阶">
        <el-input v-model="teacher.intro" :rows="4" type="textarea"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
  import teacherApi from '@/api/edu/teacher'
  import ImageCropper from "@/components/ImageCropper";
  import PanThumb from "@/components/PanThumb";

  export default {
    name: 'save',
    components: { ImageCropper, PanThumb },
    data() {
      return {
        teacher: {
          avatar: "http://oss.hewentao.tk/2022/08/202622d4d07b28421aaba900a52c883d02.png"
        },
        saveBtnDisabled: false,// 保存按钮是否禁用，防止多次点击保存
        imagecropperShow: false,
        imagecropperKey: 0, //上传组件key值，是为了解决第一次上传后，在点击上传无法上传文件，每次点击上传，这个值就 +1，就可以解决这个问题
      }
    },
    methods: {
      // 保存活修改讲师方法
      saveOrUpdate() {
        this.saveBtnDisabled = true
        // 点击时判断，是否有 id 参数，有就是修改，没有就是保存
        if (this.teacher.id) {
          this.upDataTeacher()
        } else {
          this.saveTeacher()
        }

      },

      // 添加讲师方法
      saveTeacher() {
        teacherApi.addTeacher(this.teacher).then(res => {
          this.$message.success('添加成功')
          this.saveBtnDisabled = false
          this.$router.push('/edu/table')
        }).catch(reason => {
          console.log(reason)
          this.saveBtnDisabled = false
        })
      },

      // 更新讲师方法
      upDataTeacher() {
        teacherApi.upDataTeacherById(this.teacher).then(res => {
          this.saveBtnDisabled = false
          if (res.success) {
            this.$message.success('修改成功')
            this.$router.push('/edu/table')
          }
        }).then(error => {
          console.log(error)
          this.saveBtnDisabled = false
        })
      },

      // 查询讲师方法
      selectById() {
        teacherApi.getTeacherInfo(this.$route.params.id)
          .then(res => {
            if (res.success) {
              this.teacher = res.data.teacher
            }
          }).catch(error => {
          console.log(error)
        })

      },

      close() {
        //关闭上传弹框的办法
        this.imagecropperShow = false;
        // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
        this.imagecropperKey = this.imagecropperKey + 1;
      },
      //上传成功方法
      cropSuccess(data) {
        //这个方法封装好了返回值
        this.imagecropperShow = false;
        //上传之后接口返回图片地址
        this.teacher.avatar = data.url;
        this.imagecropperKey = this.imagecropperKey + 1;
      },
    },
    created() {
      // 开局看看有没有 id 参数，有就是修改，修改就去查询讲师信息，并且回显到界面
      if (this.$route.params && this.$route.params.id) {
        this.selectById()
      }
    }
  }
</script>

<style scoped>

</style>
